<%@ page contentType="text/html; charset=UTF-8"%>
<%
	String realPath = request.getContextPath();
%>
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<title>南网图讯-首页</title>
	<link type="text/css" href="<%=realPath%>/zenithsun/news/mobile/css/basic.css" rel="stylesheet">
	<link type="text/css" href="<%=realPath%>/zenithsun/news/mobile/css/index.css" rel="stylesheet">
	<script	src="<%=realPath%>/zenithsun/news/mobile/js/jquery-latest.min.js"></script>
	<script type="text/javascript">
		var pageNum = 1,limit = 5; //页码
		function changePage(href){
			location.href=href;
		}
		$(function(){
				//加载第一页数据
				doLoadNews();
				//滚动事件
				$(window).scroll(function () {
					//滚动条至底部
					if ($(window).scrollTop() == $(document).height() - $(window).height()) {
						//to bottom 
						//$('#next-page-loading').show();
						$('#next-page-loading').html('正在加载...');
						pageNum = pageNum + 1;
						doLoadNews();
						//$('#next-page-loading').hide();
					}
					//滚动条至头部
					if($(window).scrollTop()==0){
						//to top
						$('#next-page-loading').html('');
						$('#newsContainer').html('<div style="text-align: center;">正在刷新...</div>');
						pageNum = 1;
						doLoadNews();
					}
				});
			});
		
		function replaceErrorImg(){
			 //图片异常处理
			  var imgTags = document.getElementsByTagName("img");
			  for(var i = 0; i < imgTags.length; i++){
				  imgTags.item(i).onerror = function(){
			            this.src = "/csg_pic/zenithsun/news/mobile/images/Default-bg270x180.png";
			            this.onerror = null;
			      };
			  }
		}
		</script>
	</head>
<body>

	<!--内容模块-->
	<div class="main-content">
		<section class="ind-list-grid" id="newsContainer"></section>
		<div id="newsTemplateOne" style="display: none;">
			<div class="mod-img-area">
				<a href="javascript:changePage('<%=realPath%>/path/newsinfo/viewnewsphone?id=%news.id%')"
					class="mod-link-btn fn-pr"> <img
					src="<%=realPath%>%news.coverPath%">
					<div class="mod-img-info-grid">
						<div class="mod-wrap">
							<h2 title="" class="mod-img-title fn-wto">%news.title%</h2>
							<div class="mod-img-desc clearfix">
								<p class="fn-fl fn-wto">编辑：%news.editor% /
									摄影：%news.photographer%</p>
								<p class="fn-fr fn-wto">
									<span class="ind-time fn-fr">%news.publishTime%</span><span class="ind-num fn-fr fn-dn"><i class="i-eye"></i>%news.browseCount%</span>
								</p>
							</div>
						</div>
					</div>
				</a>
			</div>
		</div>
		<div id="newsTemplateTwo" style="display: none;">
			<div class="mod-img-area">
				<a href="javascript:changePage('<%=realPath%>/path/newsinfo/viewnewsphone?id=%news.id%')"
					class="mod-link-btn mod-ImgText-list">
					<div class="mod-img-TextList clearfix">
						<div class="mod-img-TextList-info fn-fl">
							<div class="mod-wrap">
								<h2 title="" class="mod-TextList-title fn-wto">%news.title%</h2>
								<div class="mod-TextList-desc">
									<p class="">%news.nabstract%</p>
								</div>
							</div>
						</div>
						<div class="mod-img-TextList-pic fn-fr">
							<img src="<%=realPath%>%news.coverPath%" id="img-%news.id%">
						</div>
					</div>
				</a>
			</div>
		</div>
		<div class="mod-load-txt j-loadingTxt" id="dataLoading">
			<i class="icon-spinner icon-spin" id="data-tips">数据加载中,请稍等...</i>
		</div>
		<div id="next-page-loading" style="text-align: center;">
			<br/>
		</div>
	</div>
	</body>
	<script type="text/javascript">
		var flag=false;
		var ncId="${newscolumnId}";
		function doLoadNews() {
			$.post("<%=realPath%>/path/newsinfo/listnewsjson", {
				"ncId" : ncId,
				"pageNo" : pageNum
			}, function(result) {
				if (result.state == 'Success') {
					//如果首次加载，清空容器
					if(pageNum == 1){
						$('#newsContainer').html('');
					}
					createNewsByTemplate(result.content);
					$('#dataLoading').hide();
				} else {
					alert("操作失败,原因：" + result.content);
				}
			});
		}

		/**
		 * 根据模板创建新闻信息
		 */
		function createNewsByTemplate(pageResult) {
			var len = pageResult.items.length;
			//如果数据小于行数，证明数据已至最后一页，不提提示加载下一页
			if(len < limit)
			{
				$("#next-page-loading").html('');
			}
			if (len > 0) {
				var oneCount = 0;
				var twoCount = 0;
				for (var index = 0; index <len; index++) {
					var newsInfo = pageResult.items[index];
					var template = null;
					var currNews = null;
					if (oneCount > 2) {
						if (twoCount > 1) {
							oneCount = 0;
							twoCount = 0;
						} else {
							template = $("#newsTemplateTwo").html();
							currNews = template;
							currNews = template4two(currNews, newsInfo);
							twoCount++;
						}
					} else {
						template = $("#newsTemplateOne").html();
						currNews = template;
						currNews = template4one(currNews, newsInfo);
						oneCount++;
					}
					$('#newsContainer').append(currNews);
				}
				//pageNum++;
			} else {
				$("#next-page-loading").html('没有更多新闻了');
			}
		}

		function template4one(currNews, newsInfo) {
			currNews = currNews.replaceAll("%news.id%", newsInfo.id);
			currNews = currNews.replaceAll("%news.coverPath%",
					newsInfo.coverPath);
			currNews = currNews.replaceAll("%news.title%", newsInfo.title);
			currNews = currNews.replaceAll("%news.picNum%", newsInfo.picNum
					+ "张");
			currNews = currNews.replaceAll("%news.publishTime%",
					newsInfo.publishTime);
			currNews = currNews.replaceAll("%news.editor%",
					getNotBlank(newsInfo.editor));
			currNews = currNews.replaceAll("%news.photographer%",
					getNotBlank(newsInfo.photographer));
			currNews = currNews.replaceAll("%news.browseCount%", 100);
			replaceErrorImg(newsInfo.id);
			return currNews;
		}

		function template4two(currNews, newsInfo) {
			currNews = currNews.replaceAll("%news.id%", newsInfo.id);
			currNews = currNews.replaceAll("%news.coverPath%",
					newsInfo.coverPath);
			currNews = currNews.replaceAll("%news.title%", newsInfo.title);
			currNews = currNews.replaceAll("%news.nabstract%",
					getNotBlank(newsInfo.nabstract));
			replaceErrorImg(newsInfo.id);
			return currNews;
		}
		function getNotBlank(v) {
			if (v == undefined) {
				return "";
			} else {
				return v;
			}
		}
		String.prototype.replaceAll = function(s1, s2) {
			return this.replace(new RegExp(s1, "gm"), s2);
		}
		function replaceErrorImg(id) {

			//图片异常处理
			var imgTag = $('#img-' + id);
			imgTag.onerror = function() {
				this.src = "/csg_pic/zenithsun/news/mobile/images/Default-bg270x180.png";
				this.onerror = null;
			}
		}
	</script>

</html>